<template>
  <div>
    <!--    对于ref对象 在2模板中引用时 可以直接把内容展现出来-->
    <h1>{{ count }}</h1>
    <h2>{{ double }}</h2>
    <h3>{{ title }}</h3>
    <h1>x:{{ x }} y:{{ y }}</h1>
    {{loading}}
    <h1 v-if="loading">加载种. ..</h1>
    <img :src="result[0].url" alt="">
    <button @click="increase">👍+1</button>
    <button @click="changeTitle">修改title</button>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, computed, reactive, toRefs, watch} from 'vue';
import useMousePosition from '@/hooks/useMousePosition'
import useURLLoader from "@/hooks/useURLLoader";

interface IData {
  count: number;
  increase: () => void;
  double: number
}

interface DogResult {
  message: string;
  status: string;
}

interface CatResult {
  id: string;
  url: string;
  width: number;
  height: number
}

export default defineComponent({
  name: 'App',
  components: {},
  setup() {// 生命周期之前

    /*const count =  ref(0)
    const double = computed(()=>{
      return count.value * 2
    })
    const increase = ()=>{
      count.value++
    }*/
    const data: IData = reactive({
      count: 0,
      increase: () => {
        data.count++
      },
      double: computed(() => data.count * 2)
    })
    const title = ref('')

    const {x, y} = useMousePosition()
    // const {result,loading,error} = useURLLoader<DogResult>('https://dog.ceo/api/breeds/image/random')

    const {result,loading,error} = useURLLoader<CatResult[]>('https://api.thecatapi.com/v1/images/search?limit=1')
    watch(loading,(res,ores)=>{
      console.log('------')
      console.log(res,ores)
    })
    watch([title, () => data.count], (v) => {
      console.log(v)
      document.title = v[0]
    })
    watch(result, (res) => {
        console.log(res)
        if(res){
          console.log(res[0]);
        }
        console.log('------')
    })

    const changeTitle = () => {
      title.value += 'Hello world'
    }
    // return data
    return {
      ...toRefs(data),
      changeTitle,
      title,
      x,
      y,
      result, loading, error
    }
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
